<template>
  <div class="dashboard-container">
    <!-- 顶部数据概览 -->
    <el-row :gutter="14" class="four-info-box">
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="info-box">
          <div class="info-top">
            <div class="left-info">
              <h2 class="info-num">
                817
              </h2>
              <p class="info-desc">车位总数</p>
            </div>
            <div class="info-img">
              <svg class="icon icon-che" aria-hidden="true">
                <use xlink:href="#icon-che"/>
              </svg>
            </div>
            <div class="info-progress-bar">
              <div class="progress-color icon-che"/>
              <span>18/817</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="info-box">
          <div class="info-top">
            <div class="left-info">
              <h2 class="info-num">65</h2>
              <p class="info-desc">停车场数量</p>
            </div>
            <div class="info-img">
              <svg class="icon icon-map-stopping" aria-hidden="true">
                <use xlink:href="#icon-map-stopping"/>
              </svg>
            </div>
            <div class="info-progress-bar">
              <div class="progress-color icon-map-stopping"/>
              <span>18/817</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="info-box">
          <div class="info-top">
            <div class="left-info">
              <h2 class="info-num">
                756
              </h2>
              <p class="info-desc">报警总数</p>
            </div>
            <div class="info-img">
              <svg class="icon icon-baojing" aria-hidden="true">
                <use xlink:href="#icon-baojing"/>
              </svg>
            </div>
            <div class="info-progress-bar">
              <div class="progress-color icon-baojing"/>
              <span>18/817</span>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="6">
        <div class="info-box">
          <div class="info-top">
            <div class="left-info">
              <h2 class="info-num">
                537
              </h2>
              <p class="info-desc">故障总数</p>
            </div>
            <div class="info-img">
              <svg class="icon icon-guzhang1" aria-hidden="true">
                <use xlink:href="#icon-guzhang1"/>
              </svg>
            </div>
            <div class="info-progress-bar">
              <div class="progress-color icon-guzhang1"/>
              <span>18/817</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!-- 报警数据图标 -->
    <div class="warning-map-box">
      <div class="warning-title">
        <svg class="icon icon-baojing1" aria-hidden="true">
          <use xlink:href="#icon-baojing1"/>
        </svg>
        <span>报警统计</span>
        <pagego :path="equipmentmngPath"/>
      </div>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="chart-wrapper">
            <bar-chart/>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 数据详情图标 *2 -->
    <div class="two-info-box">
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="row-bg">
            <div class="two-info-title">
              <svg class="icon icon-chewei" aria-hidden="true">
                <use xlink:href="#icon-chewei"/>
              </svg>
              <span>车位统计</span>
              <pagego :path="equipmentmngPath"/>
            </div>
            <div class="chart-wrapper wrapper-height">
              <thermometer-chart/>
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="row-bg">
            <div class="two-info-title">
              <svg class="icon icon-guzhang1" aria-hidden="true">
                <use xlink:href="#icon-guzhang1"/>
              </svg>
              <span>故障统计</span>
              <pagego :path="equipmentmngPath"/>
            </div>
            <div class="chart-wrapper">
              <negative-chart/>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 地图 -->
    <div class="map-box">
      <div class="map-title">
        <svg class="icon icon-shipinjiankong" aria-hidden="true">
          <use xlink:href="#icon-shipinjiankong"/>
        </svg>
        <span>实时情况总览</span>
        <pagego :path="warningPath"/>
      </div>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="24">
          <el-amap :vid="'amap-vue'" class="bm-view"/>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BarChart from './components/barChart'
import ThermometerChart from './components/thermometerChart'
import NegativeChart from './components/negativeChart'
import Pagego from '@/components/pageGoBtn/index'

export default {
  name: 'Dashboard',
  components: {
    BarChart,
    ThermometerChart,
    NegativeChart,
    Pagego
  },
  data () {
    return {
      infoWindow: {
        show: true
      },
      center: { lng: 114.302962, lat: 30.606176 },
      zoom: 15,
      warningPath: 'mapmng/mapmng',
      equipmentmngPath: '/example/equipmentmng'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  methods: {
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
    },
    handler ({ BMap, map }) {
      this.center.lng = 114.302962
      this.center.lat = 30.606176
      this.zoom = 15
    },
    formatNumber (value) {
      return parseInt(value)
    }
  }
}
</script>

<style  lang="stylus" scoped>
.dashboard {
  &-container {
    margin: 15px;
    .bm-view{
      height: 367px;
      padding: 13px;
    }
    .four-info-box{
      .info-box {
        height: 100%;
        background-color: #fff;
        color: #7a7d7f;
        padding: 16px;
        box-sizing: border-box;
        transition: all ease .8s;
        margin-bottom: 15px;
        height: 105px;
        .icon-che {
          color: #5bc0de;
        }
        .icon-guzhang1{
          color: #efad4d;
        }
        .icon-map-stopping{
          color: #de805c;
        }
        .icon-baojing{
          color: #d95350;
        }
        .info-top{
          width: 100%;
          position: relative;
          .left-info{
            display: inline-block;
            .info-num {
              font-size: 32px;
              font-weight: normal;
              margin: 0;
            }
            .info-desc{
              margin: 0;
              font-size: 12px;
            }
          }
          .info-img{
            display: inline-block;
            position: absolute;
            top: -5px;
            right: 0px;
            .icon {
              width: 3.5rem;
              height: 3.5rem;
            }
          }
          .info-progress-bar{
            line-height: 15px;
            height: 15px;
            font-size: 15px;
            position: relative;
            background: #f5f5f5;
            top: 15px;
            span {
              position: absolute;
              right: 0;
            }
            .progress-color{
              position: absolute;
              height: 100%;
              transition: all ease 0.5s;
            }
            .icon-che {
              background-color: #5bc0de;
              width: 25%;
            }
            .icon-guzhang1{
              background-color: #efad4d;
              width: 40%;
            }
            .icon-map-stopping{
              background-color: #de805c;
              width: 60%;
            }
            .icon-baojing{
              background-color: #d95350;
              width: 80%;
            }
          }
        }
      }
      .info-box:hover{
        background-color: #33485c;
        .icon,.info-desc,.info-num{
          color: #fff;
        }
      }
    }
    .warning-map-box{
      height: 466px;
      background: #fff;
      margin-bottom: 15px;
      .warning-title{
        border-bottom: 1px solid #e5e5e5;
        height: 45px;
        line-height: 45px;
        color: #828282;
        margin-left: 10px;
        position: relative;
        .hamburger-container{
          line-height: 58px;
          height: 50px;
          float: right;
          padding: 0 10px;
          .hamburger {
            fill: #aaa !important;
          }
        }
        .icon {
          width: 1.5rem;
          height: 1.5rem;
          position: relative;
          top: 3px;
        }
      }
    }
    .two-info-box{
      margin-bottom: 15px;
      .el-row {
        margin: 0;
        padding: 0px;
      }
      .row-bg {
        background-color: #fff;
      }
      .two-info-title {
        border-bottom: 1px solid #e5e5e5;
        height: 45px;
        line-height: 45px;
        color: #828282;
        margin-left: 10px;
      }
      .chart-wrapper{
        margin-top: 30px;
      }
      .wrapper-height {
        height: 420px;
        overflow: hidden;
      }
    }
    .map-box{
      height: 417px;
      background: #fff;
      .map-title{
         border-bottom: 1px solid #e5e5e5;
        height: 45px;
        line-height: 45px;
        color: #828282;
        margin-left: 10px;
      }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
